<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>WebRTC示例</title>
    <style>
        html,
        body,
        #app {
            height: 100%;
            width: 100%;
            padding: 0;
            margin: 0 auto;
            position: relative;
        }

        * {
            padding: 0;
            margin: 0 auto;
            box-sizing: border-box;
        }

        input {
            border: none;
            border: 1px white solid;
            padding: 0px 10px;
            height: 30px;
            flex: 1;
            background: transparent;
            margin-right: -2px;
            color: white;
        }

        #tools {
            height: 30px;
            position: absolute;
            top: 3%;
            left: 5%;
            z-index: 999;
            display: flex;
            flex-direction: row;
            width: 90%;
            justify-content: space-between;
            margin: 0 auto;

        }

        #tools>* {
            display: flex;
            flex-direction: row;
        }

        #tools button {
            width: 120px;
            border: none;
            border: 1px lightseagreen solid;
            color: white;
            background-color: lightseagreen;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 1px;
        }

        #videos {
            position: relative;
            width: 100%;
            height: 100%;
        }

        .mainVideo {
            background-color: black;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .smallVideo {
            width: 20%;
            height: 20%;
            background-color: blueviolet;

            position: absolute;
            bottom: 20px;
            right: 20px;
            z-index: 999;
        }
    </style>
</head>

<body>

    <div id="app">
        <div id="tools">
            <input type="text" id="roomId" placeholder="请输入房间ID">
            <button id="joinBtn">视频</button>
            <button id="joinDesktopBtn">桌面</button>
            <button id="leaveBtn">离开</button>
            <button id="exchagePosBtn">切换</button>
        </div>

        <div id="videos">

            <video id="localVideo" class="mainVideo" autoplay muted playsinline>本地窗口</video>
            <video id="remoteVideo" class="smallVideo" autoplay playsinline>远程窗口</video>

        </div>
    </div>



    <script src="https://cdnjs.cloudflare.com/ajax/libs/webrtc-adapter/7.3.0/adapter.js"></script>

    <script src="./js/vconsole.min.js"></script>

    <script>
        var clientWidth = document.body.clientWidth;
        var clientHeight = document.body.clientHeight;

        function setWH() {

            var clientWidth = document.body.clientWidth;
            var clientHeight = document.body.clientHeight;

            document.getElementById("app").style.width = clientWidth + 'px';
            document.getElementById("app").style.height = clientHeight + 'px';

            document.getElementById("videos").style.width = clientWidth + 'px';
            document.getElementById("videos").style.height = clientHeight + 'px';

            

            console.log(clientWidth, clientHeight);
        }

        window.onresize = function () {
            setWH();
        }
        setWH();
    </script>
    <script>
        // init vConsole
        var vConsole = new VConsole();
        console.log('Hello world');
    </script>
    <script src="./js/main.js"></script>

</body>

</html>